<template>
  <div class="footer">
    <div class="container">
      <div class="footer_cont">
        <div class="logo_cont">
          <div class="footer_logo">
            <img src="../../assets/logo2.png" alt="">
          </div>
          <div class="footer_text">
            <p>Mazia store is a premium theme with advanced admin module. It’s extremely customizable, easy to use and fully responsive and retina ready.</p>
          </div>
          <div class="footer_img">
            <img src="../../assets/paypal.png" alt="">
          </div>
        </div>
        <div class="fotter_right">
          <div class="item">
            <h2>MY ACCOUNT</h2>
            <ul>
              <li>My account</li>
              <li>Checkout</li>
              <li>Shop</li>
              <li>Wishlist</li>
              <li>Frequently</li>
            </ul>
          </div>
          <div class="item">
            <h2>Quick Links</h2>
            <ul>
              <li>Special Offers</li>
              <li>Gift Cards</li>
              <li>F21 Red</li>
              <li>Privacy Policy</li>
              <li>Teams of Use</li>
              <li>Portfolio</li>
            </ul>
          </div>
          <div class="item itemShow">
            <h2>Company Info</h2>
            <ul>
              <li>About us</li>
              <li>Careers</li>
              <li>Business With Us</li>
              <li>Find a Store</li>
              <li>Teams of Use</li>
              <li>Press & Talent</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <el-backtop  :bottom="50">
      <div class="icon">
        <i class="iconfont icon-xiangshangzhanhang"></i>
      </div>
    </el-backtop>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="less" scoped>
.footer{
  background-color: #292929;
  padding: 2.5rem 0;
  .footer_cont{
    width: 74%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .logo_cont{
      width: 35%;
      display: flex;
      flex-direction: column;
      .footer_logo{
        margin-bottom: 0.8rem;
        img{
          width: 3.75rem;
        }
      }
      .footer_text{
        margin-bottom: 2rem;
        p{
          font-size: 0.43rem;
          color: #c4c4c4;
        }
      }
      .footer_img{
        width: 100%;
        img{
          width: 70%;
        }
      }
    }
    .fotter_right{
      width: 50%;
      display: flex;
      justify-content: space-between;
      .item{
        width: 30%;
        h2{
          color: #fff;
          font-size: 0.43rem;
          font-weight: 500;
          text-transform: uppercase;
          margin-bottom: 1rem;
        }
        ul{
          li{
            margin-bottom: 0.4rem;
            font-size: 0.4rem;
            font-weight: 200;
            color: #c4c4c4;
            transition: all 0.3s;
            cursor: pointer;
          }
          li:hover{
            color: #eb2323;
          }
        }
      }
    }
    @media screen and (max-width:992px){
      .logo_cont,.fotter_right{
        width: 100%;
      }
      .fotter_right{
        padding-top: 30px;
      }
    }
    @media screen and (max-width:576px){
      .itemShow{
        display: none;
      }
    }
  }
  .icon{
    i{
      font-size: 0.625rem;
    }
  }
}
</style>
